<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-02 06:19:41
 * @LastEditTime: 2024-11-08 22:15:02
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\ImgEnlarge\page\entry\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="pageWrap">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :maxCount="1"
      :multiple="false"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :before-upload="beforeUpload"
      :customRequest="customRequest"
      list-type="picture"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击选择或拖拽图片到这里上传</p>
      <p class="ant-upload-hint">
        单次上传一个文件，文件格式可为png、jpg、jpeg
      </p>
    </a-upload-dragger>
    <div class="setWrap">
      放大倍数：
      <a-radio-group v-model:value="scale" name="radioGroup">
        <a-radio :value="1">1倍</a-radio>
        <a-radio :value="2">2倍</a-radio>
        <a-radio :value="3">3倍</a-radio>
        <a-radio :value="4">4倍</a-radio>
      </a-radio-group>
    </div>
    <div class="btnsWrap">
      <a-space>
        <a-button type="primary" @click="handleZoomImage">预览</a-button>
        <a-button v-if="sourceImg !== ''" type="primary" ghost @click="handleDownloadImg">下载</a-button>
      </a-space>
    </div>
    <div class="previewImg">
      <a-image
        :width="'auto'"
        :src="scaleImg"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { getBase64 } from '@/utils/index.js'
import { zoomImage} from '../../service/index.js'

const fileList = ref([])

const sourceFile = ref(null)

const sourceImg =  ref('')

const scale = ref(1)

const scaleImg = ref('')

const handleChange = (info) => {
  const status = info.file.status
  if (status !== 'uploading') {
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`)
  } else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  } else if (status === 'removed') {
    sourceFile.value = null
    sourceImg.value = ''
    scaleImg.value = ''

  }
}
const handleDrop = (e) => {
  console.log(e)
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('请上传png、jpg、jpeg格式的图片!');
  }
  const isLt2M = file.size / 1024 / 1024 < 1000;
  if (!isLt2M) {
    message.error('图片必须小于1000MB!');
  }
  return isJpgOrPng && isLt2M;
}

// 自定义上传
const customRequest = async (e) => {
  sourceFile.value = null
  sourceFile.value = e.file
  // 获取图片的base64码
  sourceImg.value = await getBase64(e.file)
  fileList.value[0].status = 'done'
}

// 放大图片
const handleZoomImage = async () => {
  // 放大图片
  scaleImg.value = await zoomImage(sourceImg.value, scale.value)
}

// 下载图片
const handleDownloadImg = async () => {
  const { name: fileName } = sourceFile.value
  // 放大图片
  scaleImg.value = await zoomImage(sourceImg.value, scale.value)
  // 创建a标签
  var link = document.createElement('a')
  // 设置a标签为不可见
  link.style.display = 'none'
  // 将a标签添加到body
  document.body.appendChild(link)
  // 设置a标签的href
  link.href = scaleImg.value
  // 设置a标签的download
  link.download = `${fileName}x${scale.value}.png`

  // 模拟点击事件进行下载
  link.click()
  // 下载完成后移除a标签
  document.body.removeChild(link)
}
</script>

<style lang="scss" scoped>
.pageWrap {
  padding: 16px;
  :deep(.ant-upload-wrapper .ant-upload-drag){
    height: auto !important;
  }
  .setWrap{
    margin: 16px 0;
  }
  .btnsWrap{
    margin: 16px 0;
  }
  .previewImg{
    :deep(.ant-image) {
      .ant-image-img{
        width: auto !important;
      }
    }
  }
}
</style>
